﻿<!--Additional input fields Start-->
<div class="grid">
    <div class="grid-title">
        <div class="pull-left">
            <div class="icon-title"><i class="icon-bookmark"></i></div>
            <span>Additional input fields</span>
            <div class="clearfix"></div>
        </div>
        <div class="pull-right">
            <div class="icon-title"><a href="#"><i class="icon-refresh"></i></a></div>
            <div class="icon-title"><a href="#"><i class="icon-user"></i></a></div>
            <div class="icon-title"><a href="#"><i class="icon-cog"></i></a></div>
        </div>
        <div class="clearfix"></div>
    </div>
    <div class="grid-content">
        <div class="formRow">
            <label>Phone Number:</label>
            <div class="formRight">
                <div class="row-fluid">
                    <div class="span4">
                        <input type="text" name="area_code" id="area_code" class="span input" maxlength="3" size="3" />
                    </div>
                    <div class="span4">
                        <input type="text" name="number1" id="number1" class="span input" maxlength="3" size="3" />
                    </div>
                    <div class="span4">
                        <input type="text" name="number2" id="number2" class="span input" maxlength="4" size="5" />
                    </div>
                </div>
            </div>
        </div>
        <div class="formRow">
            <label>Social Number:</label>
            <div class="formRight">
                <div class="row-fluid">
                    <div class="span4">
                        <input type="text" name="ssn1" id="ssn1" class="span input" maxlength="3" size="3" />
                    </div>
                    <div class="span4">
                        <input type="text" name="ssn2" id="ssn2" class="span input" maxlength="2" size="3" />
                    </div>
                    <div class="span4">
                        <input type="text" name="ssn3" id="ssn3" class="span input" maxlength="4" size="5" />
                    </div>
                </div>
            </div>
        </div>
        <div class="formRow">
            <label>Text only:</label>
            <div class="formRight">
                <div class="row-fluid">
                    <div class="span4">
                        <input type="text" name="text1" id="text1" class="span input" maxlength="5" size="4" />
                    </div>
                    <div class="span4">
                        <input type="text" name="text2" id="text2" class="span input" maxlength="4" size="4" />
                    </div>
                    <div class="span4">
                        <input type="text" name="text3" id="text3" class="span input" maxlength="5" size="4" />
                    </div>
                </div>
            </div>
        </div>
        <div class="formRow">
            <label>Alpha only:</label>
            <div class="formRight">
                <div class="row-fluid">
                    <div class="span4">
                        <input type="text" name="alpha1" id="alpha1" class="span input" maxlength="5" size="4" />
                    </div>
                    <div class="span4">
                        <input type="text" name="alpha2" id="alpha2" class="span input" maxlength="5" size="4" />
                    </div>
                    <div class="span4">
                        <input type="text" name="alpha3" id="alpha3" class="span input" maxlength="5" size="4" />
                    </div>
                </div>
            </div>
        </div>
        <div class="formRow">
            <label>Uppercase letters</label>
            <div class="formRight">
                <div class="row-fluid">
                    <div class="span4">
                        <input type="text" name="alphanumeric1" id="alphanumeric1" class="span input" maxlength="5" size="4" />
                    </div>
                    <div class="span4">
                        <input type="text" name="alphanumeric2" id="alphanumeric2" class="span input" maxlength="5" size="4" />
                    </div>
                    <div class="span4">
                        <input type="text" name="alphanumeric3" id="alphanumeric3" class="span input" maxlength="5" size="4" />
                    </div>
                </div>
            </div>
        </div>
        <div class="formRow">
            <label>Any characters:</label>
            <div class="formRight">
                <div class="row-fluid">
                    <div class="span4">
                        <input type="text" name="all1" id="all1" maxlength="5" class="span input" size="4" />
                    </div>
                    <div class="span4">
                        <input type="text" name="all2" id="all2" maxlength="5" class="span input" size="4" />
                    </div>
                    <div class="span4">
                        <input type="text" name="all3" id="all3" maxlength="5" class="span input" size="4" />
                    </div>
                </div>
            </div>
        </div>
        <div class="formRow">
            <label>Regular Expression:</label>

            <div class="formRight">
                <input type="text" name="regex" id="regex" class="span input" maxlength="15" size="13" />
            </div>
        </div>
        <div class="formRow">
            <label>Auto expanding:</label>
            <div class="formRight">
                <textarea cols="50" rows="3" class="span input same-height-1 resize-text">Here is some sample text just for view purpose.</textarea>
            </div>
        </div>

        <div class="clearfix"></div>
    </div>
</div>
<!--Additional input fields END-->